function __isObject(obj) {
  return typeof obj === "object" && obj !== null;
}

const effectSet = new Set();
let activeEffect = null;

function reactive(obj) {
  return new Proxy(obj, {
    get(target, prop) {
      if (activeEffect) {
        effectSet.add(activeEffect); // 添加副作用函数
      }
      return target[prop];
    },
    set(target, prop, value) {
      if (__isObject(value)) {
        target[prop] = observe(value);
      } else {
        target[prop] = value;
      }

      // 执行多个副作用函数
      effectSet.forEach((fn) => fn());
      return true;
    },
  });
}
const state = reactive({ name: "soup", age: 2 });

const effectName = () => {
  console.log("页面调用name:", state.name);
};

const effectAge = () => {
  console.log("页面调用age:", state.age);
};

// 注册副作用函数
const registerEffect = (fn) => {
  if (typeof fn !== "function") {
    return;
  }
  activeEffect = fn
  fn();
  activeEffect = null;  
};

// 相当于页面初始化的时候，响应式数据渲染到页面的行为
registerEffect(effectName);  // 打印：页面调用name: soup
registerEffect(effectAge);  // 打印：页面调用age: 2

state.name = '张三' // 打印：页面调用name: 张三 页面调用age: 2

// 还是会调用所有的副作用函数
// 我需要，在更新数据的时候，只调用相关的副作用函数
// 进入./util/effect-v2.js
